<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表页</title>
    <style>
        * { /*样式的重置*/
            margin: 0;
            padding: 0;
            list-style: none;

        }
        body{height: 100%}
        html{height: 100%}

        #root { /*整体的边框*/
            /*background: red;*/
            width: 700px;
            height: 100%;
            /*min-height: 2800px;*/
            /*height: 100%;*/
            margin: 0px auto; /*水平居中*/
            position: relative;
        }

        .layout-box {
            position: absolute;
        }

        .mid {
            min-height: 600px;
            top: 100px;
        }

        #head {
            /*background: black;*/
            width: 100%;
            height: 100px;

        }

        #left {
            /*background: yellow;*/
            width: 80%;

        }

        #right {
            /*background: brown;*/
            width: 20%;
            right: 0;
        }

        #foot {
            background: blue;
            width: 100%;
            height: 100px;
            bottom: 0;
        }

        #nav {
            width: 100%;
        }

        #nav li {
            float: left;
            width: 12.5%;
            height: 30px;
            background: #ccc;
            text-align: center;
        }

        #nav li > a {

            line-height: 30px;
            text-decoration: none;
            color: black;
        }

        #goods-box > li {
            width: 33%;
            padding: 0.16%;
            text-align: center;
            float: left;

        }

        #goods-box > li img {
            width: 90%;
        }

        .left {
            /*display: inline-block;*/
            float: left;
        }

        .right {
            /*display: inline-block;*/
            float: right;
        }
        .clear-float{
            clear: both;
        }
         #top-10-list li{
             margin: 15px 0;
         }
        #top-10-list img{
            width: 100%;
        }
        #top-10-list-title {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="root">
    <div id="head" class="layout-box">
        <ul id="nav">
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
            <li><a href="#">列表项</a></li>
        </ul>
        <h1>淘宝网</h1>
    </div><!--页首结束-->
    <div id="left" class="layout-box mid">
        <ul id="goods-box">
            <li><img src="a701su2093595565650.jpg" alt="">
                <div>
                    <span class="left">￥999.00</span>
                    <span class="right">10000人付款</span>
                </div>
                <div><a href="#" class="left">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div>
                    <span class="left">太平鸟</span>
                    <span class="right">浙江 宁波</span>
                </div>
                <div class="clear-float"></div>
                <div>
                    <span class="left">sc</span>
                    <span class="right">ww</span>
                </div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
            <li><img src="a701su2093595565650.jpg" alt="">
                <div><span>￥999.00</span><span>10000人付款</span></div>
                <div><a href="#">【包邮】碎花小吊带,找男票神器,林志玲同款</a></div>
                <div><span>太平鸟</span><span>浙江 宁波</span></div>
                <div><span>sc</span><span>ww</span></div>
            </li>
        </ul>

    </div><!--左边栏结束-->
    <div id="right" class="layout-box mid">
        <div id="top-10-list">
            <div id="top-10-list-title">
                风云榜前10名
            </div>
            <ul>
                <li>
                    <img src="a701su2093595565650.jpg" alt="">
                    <div>
                        <span class="left">￥999</span>
                        <span class="right">销100</span>
                    </div>
                </li>
                 <li>
                    <img src="a701su2093595565650.jpg" alt="">
                    <div>
                        <span class="left">￥999</span>
                        <span class="right">销100</span>
                    </div>
                </li>
            </ul>
        </div>

    </div><!--右边栏结束-->
    <div id="foot" class="layout-box"></div><!--页脚结束-->
</div><!--根元素结束-->
</body>
</html>